All Buttons 按鈕圖列

- 在同一螢幕上使用不同型別的按鈕以引導使用者注意力
- Nine types: elevated, filled, filled tonal, outlined, text, icon, segmented, FAB, extended FAB 九種型別:凸起、填充、填充色調、輪廓、文字、圖示、分段、浮動操作按鈕(FAB)、擴充套件浮動操作按鈕(extended FAB)
- 每個按鈕具有高、中或低重點程度
Choosing buttons 選擇按鈕
每個按鈕都具有高、中或低三種強調級別:
高強調(High emphasis)適用於主要操作(Primary Action)
中等強調(Medium emphasis)適用於重要但不干擾其他元素的操作
低強調(Low emphasis)適用於可選或輔助操作
不同強調級別的按鈕示例:
| 強調級別 | 元件 | 作用 | 示例操作 |
| 高強調 | Extended FAB | 適用於更大螢幕,提供更顯眼的主要操作 | 建立、撰寫、發起新執行緒 |
| FAB | 預設用於主要操作,有三種尺寸(小、中、大) | 建立、撰寫 | |
| Filled button | 顏色對比度強,通常用於最終或解鎖操作 | 儲存、確認、完成 | |
| 中等強調 | Filled tonal button | 顏色較淡,視覺層級低於填充按鈕 | 儲存、確認、完成 |
| Elevated button | 適用於需要從背景中分離出來的操作 | 回覆、檢視全部、新增到購物車 | |
| Outlined button | 用於重要但非主要操作,例如“檢視全部”或“新增到購物車” | 回覆、檢視全部、撤回 | |
| 低強調 | Text button | 視覺佔比最低,適用於次要操作 | 瞭解更多、更改賬戶、開啟 |
| Segmented button | 比單個圖示按鈕更顯眼 | 左對齊/居中對齊/右對齊 | |
| Icon button | 適用於書籤、收藏等可選操作 | 新增到收藏夾、列印 |
Hierarchy 層次結構

- 每個螢幕應該有一個最突出(高強調)的主要操作按鈕,以確保使用者注意力集中。
- 其他按鈕應適當降低視覺強調級別,避免與主要按鈕競爭注意力。
- 確保多個按鈕不會導致狀態混淆,可用狀態的按鈕不應看起來像禁用狀態。
Placement 放置位置
在一個介面中,可以使用不同型別的按鈕來區分不同的功能。主要功能應該最醒目,其他功能則相對次要。

- 最重要的操作:用填充按鈕,讓它顯眼易見
- 次要的操作:用文字按鈕,讓它不那麼顯眼
- 特別重要的操作:用擴充套件浮動按鈕,讓它最顯眼最容易點選
最佳實踐(Best Practices)
- 為主要操作選擇更高強調的按鈕,如在文字按鈕旁使用填充按鈕。
- 可以將中等強調的輪廓按鈕放在高強調的填充按鈕旁,形成層級對比。
- 對於單一重要操作,建議使用填充按鈕,以保持介面簡潔。




